<!DOCTYPE html>
<html>
<head>
    <title>MVVM</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="demo-section k-header">
        <div class="box-col" style="width: 300px">
            <h4>Select a node</h4>
            <div class="files"
                 data-role="treeview"
                 data-drag-and-drop="true"
                 data-text-field="name"
                 data-spritecssclass-field="type"
                 data-bind="visible: isVisible,
                            source: files,
                            events: { select: onSelect }"></div>
        </div>
        <div class="box-col console-section">
            <h4>Console</h4>
            <div class="console"></div>
        </div>
            <div class="box-col current-state">
            <h4>Current view model state:</h4>
            <pre>
    {
        name: <span data-bind="text: name"></span>,
        files: <span data-bind="text: printFiles"></span>
    }
            </pre>
        </div>
    </div>
    <div class="box">
        <div class="box-col" style="width: 300px">
            <h4>Configuration</h4>
            <div>
                <label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
            </div>
        </div>
        <div class="box-col">
            <h4>Information</h4>
            Kendo UI TreeView supports the
            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and
            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
        </div>
    </div>

<script>
    var viewModel = kendo.observable({
        isVisible: true,
        onSelect: function(e) {
            var treeView = e.sender;
            var text = treeView.text(e.node);
            kendoConsole.log("event :: select (" + text + ")");
        },
        files: kendo.observableHierarchy([
            { name: "My Web Site", type: "folder", expanded: true, items: [
                { name: "images", type: "folder", expanded: true, items: [
                    { name: "logo.png", type: "image" },
                    { name: "my-photo.jpg", type: "image" }
                ] },
                { name: "resources", type: "folder", expanded: true, items: [
                    { name: "resources", type: "folder" },
                    { name: "zip", type: "folder" }
                ] },
                { name: "about.html", type: "html" },
                { name: "index.html", type: "html" }
            ] }
        ]),
        printFiles: function() {
            // helper function that prints the relevant data from the hierarchical model
            var items = this.get("files").toJSON();

            function removeFields(item) {
                delete item.index;

                if (item.items.length == 0) {
                    delete item.items;
                } else {
                    item.items = $.map(item.items, removeFields);
                }

                return item;
            }

            $.map(items, removeFields);

            var jsonString = JSON.stringify(items, null, 2);

            return jsonString.replace(/\n/gi, "\n    ")
                        .replace(/\n\s*("name)/gi, " $1")
                        .replace(/\n\s*("type)/gi, " $1")
                        .replace(/\n\s*("expanded)/gi, " $1")
                        .replace(/\n\s*("selected)/gi, " $1")
                        .replace(/\n\s*("items)/gi, " $1")
                        .replace(/\s*\n\s*(})/gi, " $1")
                        .replace(/(\s*)]\n\s*}/gi, "] }");
        }
    });
    kendo.bind($("#example"), viewModel);
</script>

<style scoped>
    .current-state pre {
        font-size: 12px;
    }

    .files h3 {
        color: #787878;
        border-bottom: 1px solid #ccc;
        padding-bottom: .4em;
        margin-bottom: .4em;
    }

    .files .k-treeview {
        height: 300px;
    }

    .files .k-sprite {
        background-image: url("../content/web/treeview/coloricons-sprite.png");
    }

    .rootfolder { background-position: 0 0; }
    .folder { background-position: 0 -16px; }
    .pdf { background-position: 0 -32px; }
    .html { background-position: 0 -48px; }
    .image { background-position: 0 -64px; }
</style>
</div>


    
    
</body>
</html>
